<template>
  <dark-mode-container
    class="global-header"
    f-y-c
    h-full
    :inverted="theme.header.inverted"
  >
    <global-logo
      v-if="showLogo"
      :show-title="true"
      h-full
      :style="{ width: theme.sider.width + 'px' }"
    />
    <div v-if="!showHeaderMenu" flex-1-hidden f-y-c h-full>
      <menu-collapse v-if="showMenuCollapse" />
      <global-breadcrumb v-if="theme.header.crumb.visible" />
    </div>
    <header-menu v-else />
    <div flex justify-end h-full>
      <full-screen />
      <theme-mode />
      <system-message />
      <setting-button v-if="showButton" />
      <user-avatar />
    </div>
  </dark-mode-container>
</template>

<script setup lang="ts">
import { useThemeStore } from "@/store";
import GlobalLogo from "../global-logo/index.vue";
import {
  FullScreen,
  GlobalBreadcrumb,
  HeaderMenu,
  MenuCollapse,
  SettingButton,
  SystemMessage,
  ThemeMode,
  UserAvatar,
} from "./components";

interface Props {
  /** 显示logo */
  showLogo: App.GlobalHeaderProps["showLogo"];
  /** 显示头部菜单 */
  showHeaderMenu: App.GlobalHeaderProps["showHeaderMenu"];
  /** 显示菜单折叠按钮 */
  showMenuCollapse: App.GlobalHeaderProps["showMenuCollapse"];
}
defineProps<Props>();

const theme = useThemeStore();

const showButton = import.meta.env.PROD && import.meta.env.VITE_VERCEL !== "Y";
</script>

<style scoped>
.global-header {
  box-shadow: 0 1px 2px rgb(0 21 41 / 8%);
}
</style>
